<template>
  <div class="container">
    <el-dialog
      title="商品绑定"
      :visible.sync="dialog.dialogVisible"
      @open="getData"
      center
      width="500px"
    >
      <div class="item">
        <div class="itemName">供应商:</div>
        <el-select
          v-model="search.supplier_code"
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请选择供应商"
          :remote-method="supplierRemoteMethod"
          :loading="supplierCenter.loading"
        >
          <el-option
            v-for="item in supplierCenter.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <!-- <div class="item">
        <div class="itemName">配送中心:</div>
        <el-select
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          v-model="search.rdc_code"
          placeholder="请搜索选择配送中心"
          :remote-method="selectListsRemoteMethod"
          :loading="selectLists.loading"
        >
          <el-option
            v-for="item in selectLists.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div> -->
      <div class="item">
        <div class="itemName">门店:</div>
        <el-select
          style="margin-bottom: 5px"
          v-model="search.org_code"
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请选择门店"
          :remote-method="organizationMethod"
          :loading="insides.loading"
        >
          <el-option
            v-for="item in insides.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="itemName">商品:</div>
        <el-select
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          v-model="search.goods_code"
          placeholder="请搜索选择商品"
          :remote-method="insideRemoteMethod"
          :loading="inside.loading"
        >
          <el-option
            v-for="item in inside.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { bind ,selectErpGoodsAllData} from "@/api/suppliersSupermarket/suppliersSupermarketList";
import { selectSupplierData } from "@/api/supplier/supplierList"; //供应商
import { selectRdcData } from "@/api/select/select";
import { getOpenOrgData } from "@/api/middleorder/middleorderlist";
import { selectErpOrderGoodsData } from "@/api/superOrder/superOrderList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      search: {
        goods_code: "",
        org_code: "",
        supplier_code: "",
        // rdc_code: ""
      },
      supplierCenter: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      },
      selectLists: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      },
      inside: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      },
      insides: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      }
    };
  },
  methods: {
    cancel() {
      this.search = {
        goods_code: "",
        org_code: "",
        supplier_code: "",
        // rdc_code: ""
      };
      this.supplierCenter = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
      this.selectLists = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
      this.inside = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
      this.insides = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
      this.dialog.dialogVisible = false;
    },
    getData() {
      this.getSupplier();
      // this.getselsetData();
      this.organizationList();
      // this.getGoodsData()
    },
    // 供应商数据
    getSupplier(name = "") {
      let data = {
        page: 1,
        limit: 100,
        name
      };
      //获取供应商列表
      selectSupplierData(data).then(res => {
        this.supplierCenter.option = res.data.paginate.data.map(item => {
          return {
            value: `${item.supplier_code}`,
            label: `${item.supplier_name}`
          };
        });
      });
    },

    // 搜索供应商数据
    supplierRemoteMethod(query) {
      if (query !== "") {
        this.getSupplier(query);
      } else {
        this.supplierCenter.option = [];
      }
    },
    //配送中心数据
    // getselsetData(name = "") {
    //   let data = {
    //     page: 1,
    //     limit: 500,
    //     code_or_name: name
    //   };

    //   selectRdcData(data).then(res => {
    //     if (res.data.paginate.data) {
    //       this.selectLists.option = res.data.paginate.data.map(item => {
    //         return {
    //           value: `${item.d_code}`,
    //           label: `${item.d_name}`
    //         };
    //       });
    //     }
    //   });
    // },
    // 搜索配送中心数据
    // selectListsRemoteMethod(query) {
    //   if (query !== "") {
    //     this.getselsetData(query);
    //   } else {
    //     this.selectLists.option = [];
    //   }
    // },
    // 门店数据
    organizationList(name = "") {
      let data = {
        page: 1,
        limit: 500,
        key: name
      };
      getOpenOrgData(data).then(res => {
        if (res.data) {
          this.insides.option = res.data.map(item => {
            return {
              value: `${item.erp_org_code}`,
              label: `${item.name}`
            };
          });
        }
      });
    },
    // 搜索门店数据
    organizationMethod(query) {
      if (query !== "") {
        this.organizationList(query);
      } else {
        this.insides.option = [];
      }
    },
    // 商品数据
    getGoodsData(name) {
      let data = {
        page: 1,
        limit: 500,
        goods_code: name,
        
      };
      selectErpGoodsAllData(data).then(res => {
        this.goodsList = res.data.paginate.data;
        if (res.data.paginate.data) {
          this.inside.option = res.data.paginate.data.map(item => {
            return { value: `${item.Code}`, label: `${item.Name}` };
          });
        }
      });
    },
    // 搜索商品数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getGoodsData(query);
      } else {
        this.inside.options = [];
      }
    },
    confirm() {
      let data = {
        goods_code: this.search.goods_code,
        org_code: this.search.org_code,
        supplier_code: this.search.supplier_code,
        // rdc_code: this.search.rdc_code
      };
      bind(data)
        .then(res => {
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.$emit("upData");
            this.cancel();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.item .itemName {
  width: 100px;
  font-size: 14px;
  font-weight: bold;
}
</style>
